<template>
	<!-- 充值 -->
	<view class="bigbox pt32 pb90">
		<!-- 头部盒子 -->
		<view class="pl10 pr10">
			<!-- 头部tit盒子 -->
			<view class="headerbox-tit">
				选择提现金额
			</view>
			<!-- 头部tit盒子 -->

			<!-- 选择金额盒子 -->
			<view class="selectbox flex flex-wrap row-between">
				<!-- 每一项盒子 -->
				<view class="selectbox-item mt26 " v-for="(item,index) in withdrawalList" :key="index"
					:class="money == item.price ? 'active' : ''" @tap="money = item.price">
					{{item.price}}
				</view>

			</view>
			<!-- 选择金额盒子 -->
		</view>

		<view class="mt40">
			<u-field v-model="money" label="自定义金额：" placeholder="请输入提现金额" label-width='200' type='number'
				input-align='right' :border-bottom='false' />
		</view>

		<!-- 线条盒子 -->
		<view class="line mt42 mb20"></view>
		<!-- /线条盒子 -->

		<view class="flex row-right mr40 balance">
			<view>可用余额</view>
			<text>￥{{userInfo.money}}</text>
		</view>
		<!-- 头部盒子 -->

		<view class="boxmode mt54 mb54">- 提现方式 -</view>

		<view class="">
			<!-- <u-radio-group v-model="value"  wrap width='100%'>
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled">
						<view class="flex col-center radiobox">
							
							{{item.name}}
						</view>
					</u-radio>
			</u-radio-group> -->
			<radio-group @change="radioChange" width='100%'>
				<label class="uni-list-cell uni-list-cell-pd flex u-p-b-30" v-for="(item, index) in list"
					:key="item.value" @tap="chooseRadio(item)">
					<view class="flex  radiobox">
						<image :src="item.img" class="w44 h44 mr20"></image>
						<view>{{item.name}}</view>
						<view class="w300 text-cut" v-if="item.value == 3">
							({{item.bank_card_no}})
						</view>
					</view>
					<radio :value="String(item.value)" />
				</label>
			</radio-group>
		</view>

		<view class=" ml56 h86 paybtn" @tap="submit">
			提现
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//输入的金额
				money: '',
				list: [{
						name: '支付宝',
						disabled: false,
						value: 2,
						img: '/static/img/index/7pay-1.png'
					},
					{
						name: '微信',
						value: 1,
						disabled: false,
						img: '/static/img/index/7pay-2-2.png'
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				withdrawalList: [],
				// money: '',
				bank_id:'',
				userInfo:''
			};
		},
		onShow() {
			this.$user()
			this.userInfo = uni.getStorageSync('userInfo')
			this.withdrawal()
		},
		onLoad() {
			this.bank()
		},
		methods: {
			submit(){
				this.$api.withdrawal({money:this.money,type:this.type,bank_id:this.bank_id}).then(res => {
					if(res.code == 1){
						this.$msg(res.msg)
						// this.pay(res.data)
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					}
				})
			},
			chooseRadio(e) {
				if (e.value == 3) {
					this.bank_id = e.id
				}
			},
			bank() {
				this.$api.bankCardList().then(res => {
					this.bankList = res.data
					this.bankList.forEach((item, index) => {
						this.list.push({
							id: item.id,
							img: '/static/img/index/7pay-jianshe.png',
							name: item.bank_name,
							value: 3,
							bank_card_no:item.bank_card_no
						})
					})
				})
			},
			withdrawal() {
				this.$api.withdrawalList().then(res => {
					this.withdrawalList = res.data
					this.money = this.withdrawalList[0].price
				})
			},
			radioChange(e) {
				this.type = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.text-cut {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	/deep/ .uni-list-cell {
		width: 100%;
	}

	.u-radio-group,
	.radiobox {
		width: 100% !important;
	}

	.headerbox-tit {
		font-size: 30rpx;
		color: #0C162E;
	}

	.selectbox {
		.selectbox-item {
			width: 30%;
			height: 68rpx;
			background: #E9F4FF;
			border-radius: 2rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #1385FF;
		}

		.active {
			background: #1385FF;
			color: #FFFFFF;
		}
	}

	.line {
		width: 100%;
		height: 2rpx;
		background: #D2DEEB;
	}

	.balance {
		font-size: 28rpx;
		font-weight: 500;
		color: #6D788B;

		text {
			color: #FD1D4D;
		}
	}

	.boxmode {
		text-align: center;
		font-weight: 500;
		color: #0C162E;
	}

	/deep/.u-radio {
		position: relative;
		border-bottom: 2rpx solid #D2DEEB;
		padding-bottom: 22rpx;
		margin-bottom: 50rpx;
	}

	/deep/.u-radio__icon-wrap {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.paybtn {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 85%;
		text-align: center;
		line-height: 86rpx;
		background: #1385FF;
		border-radius: 10rpx;
		color: #FFFFFF;
	}
</style>
